<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>


		<script>
		//原型的使用
		Date.prototype.formatter = function(){
			var  year = this.getFullYear();
			var  month = this.getMonth(); // 从0 开始
			var  date = this.getDate();
			
			var  hour = this.getHours();
			var  min = this.getMinutes();
			var  secs = this.getSeconds();
			
			var time = year +"-"+(month+1) +"-"+date+" "+hour +":"+min+":"+secs;
			console.log("time: "+time);
			return time
		}
		
		
		
		
		let  i = 0;
		let intervalId = null;
		function clock(){
			//每个1秒钟执行 一句话
			intervalId = setInterval(function(){
				
				let now = new Date();//表示当前瞬时时间
				let now2 = new Date();//表示当前瞬时时间
			
				
				
				// var  year = now.getFullYear();
				// var  month = now.getMonth(); // 从0 开始
				// var  date = now.getDate();
				
				// var  hour = now.getHours();
				// var  min = now.getMinutes();
				// var  secs = now.getSeconds();
				
				// var time = year +"-"+(month+1) +"-"+date+" "+hour +":"+min+":"+secs;
				var time = now.formatter();
				var time2 = now2.formatter();
				console.log("time: "+time);
				
				document.getElementById("time").innerText = time;
				
			} ,  1000     )
			
			
			
		}
		
		/**
		 * 清除定时任务
		 */
		function stopClock(){
			clearInterval(intervalId)
		}
		
		let timeoutId = null;
		function changeBg(){
			
			timeoutId = setTimeout(function(){
				document.getElementById("bg").style.backgroundColor =  '#0540E0';
			}, 10000)
		}
		
		function stopChangeBg(){
			clearTimeout(timeoutId)
		}
		</script>
	</head>
	<body >
		
		<div id="bg">
			当前时间:  <span id="time"></span>
		</div>
		
		
		
		
		<button type="button" class="mui-btn mui-btn-blue" onclick="clock()">执行</button>
		<button type="button" class="mui-btn mui-btn-blue" onclick="stopClock()">停止setInterval</button>
		
		
		<button type="button" class="mui-btn mui-btn-blue" onclick="changeBg()">换背景</button>
		<button type="button" class="mui-btn mui-btn-blue" onclick="stopChangeBg()">停止setInterval</button>
	</body>
	
	
	
</html>
